var tableData=[];
var otherData=[];
var student=[];
var parents=[];
var msgParentid = "",studentId = "";//设备管理员ID、学生id
var imei = "",simid = "",deviceInfoImei = "";

if(localStorage.deviceType == "mdtid"){
    localStorage.removeItem("simid");
    simid = "";
    if(localStorage.mdtid != "undefined"){
        imei = localStorage.mdtid;
        deviceInfoImei = imei;
    }
}else{
    localStorage.removeItem("mdtid");
    imei = "";
    deviceInfoImei = "";
    if(localStorage.simid != "undefined"){
        simid = localStorage.simid;
    }
}
//定义主组件
var MainComponent=React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {
            otherData: [],
            tableData: [],
            student: Object,
            parents: [],
            cardType:''//2.4 13.56 或者不支持更换
        }
    },
    componentDidMount: function () {
        tableData = [];
        var svar = this;
        var param="param={";
        param = getJsonDataNotEmpty(param,"simid",""+simid+"");
        param = getJsonDataNotEmpty(param,"imei",""+imei+"");
        param += "}";
        suixun.ajax(serverUrl+'/deviceManage/queryDevice.json',param,"get",function(data){
            setTimeout(function () {
                suixun.hideLoding();//隐藏加载中
            },500);
            if(data.code == 200){
                if(data.info.length > 0){
                    var obj=data.info[0];
                    tableData = {devicetype:obj.devicetype,schoolname:obj.schoolname,factory:obj.factory,mdtid:obj.mdtid,telephone:obj.telephone,starttime:obj.starttime,endtime:obj.endtime,paystatus:obj.paystatus,fee:obj.fee,fee2:obj.fee2,devicetypename:obj.devicetypename,batchid:obj.batchid,boxid:obj.boxid,cardid:obj.cardid};
                    $("#telephone").val(obj.telephone);
                    $("#cardid").val(obj.cardid);
                    $("#endtime").val(obj.endtime);
                    deviceInfoImei = obj.mdtid;
                    imei = deviceInfoImei;
                    localStorage.mdtid = deviceInfoImei;
                    simid = "";
                    svar.setState({tableData:tableData,otherData:otherData});
                    svar.queryParents();
                    svar.queryStudent();
                    svar.getcardType(obj.cardid);
                }else{
                    $("#telephone").val("");
                    $("#cardid").val("");
                    $("#endtime").val("");
                    svar.setState({tableData:tableData,otherData:otherData});
                    suixun.alert("没有查询到数据!");
                }
            }else{
                suixun.alert(data.msg);
            }
        });

    },
    /**
     * 获取智能学生证type
     * @param cardid
     */
    getcardType: function (cardid) {
        suixun.ajax(serverUrl+'/deviceManage/get_mdtid_type?cardid='+cardid,'','get',function (data) {
            if(data.code==200&&data.info){
                if(data.info.type=='卫小宝'){//卫小宝:智能学生证自带的考勤卡
                    this.setState({cardType:''});
                }else{
                    this.setState({cardType:data.info.type});
                }
            }
        }.bind(this));
    },
    /**
     * 头部组件
     * @returns {XML}
     */
    goback:function(){
        window.location.href=serverUrl+'/deviceManage/queryDeviceList.html';
    },
    /**
     * 修改手机号
     * @param e
     */
    modifyPhone:function(e){
        var phone = $("#telephone").val();
        if(phone == ""){
            suixun.alert("设备手机号不能为空!");
            return;
        }else if(phone.length != 11){
            suixun.alert("设备手机号格式不对!");
            return;
        }else if(!/^[1-9]\d*$/.test(phone)){
            suixun.alert("设备手机号格式不对!");
            return;
        }
        var param="param={";
        param = getJsonDataNotEmpty(param,"modifytype","1");
        param = getJsonDataNotEmpty(param,"mdtid",deviceInfoImei);
        param = getJsonDataNotEmpty(param,"telephone",'"'+phone+'"');
        param += "}";
        this.modifyDevice(param,$(e.target).attr("data-value"),$(e.target).attr("data-upval"),"1");

    },
    /**
     * 修改考勤卡号
     * @param e
     */
    modifyCardId:function(e){
        var cardid = $("#cardid").val();
        if(cardid == ""){
            suixun.alert("考勤卡号不能为空!");
            return;
        }else if(cardid.length != 10){
            suixun.alert("考勤卡号格式不对!");
            return;
        }else if(!/^[^\u4e00-\u9fa5]{0,}$/.test(cardid)){
            suixun.alert("考勤卡号格式不对!");
            return;
        }
        var param="param={";
        param = getJsonDataNotEmpty(param,"modifytype","2");
        param = getJsonDataNotEmpty(param,"mdtid",deviceInfoImei);
        param = getJsonDataNotEmpty(param,"cardid",'"'+cardid+'"');
        param += "}";

        this.modifyDevice(param,$(e.target).attr("data-value"),$(e.target).attr("data-upval"),"2");
    },
    modifyEndTime:function(e){
        var param="param={";
        param = getJsonDataNotEmpty(param,"modifytype","3");
        param = getJsonDataNotEmpty(param,"mdtid",deviceInfoImei);
        param = getJsonDataNotEmpty(param,"endtimestring",'"'+$("#endtime").val()+'"');
        param += "}";
        this.modifyDevice(param,$(e.target).attr("data-value"),$(e.target).attr("data-upval"),"3");
    },
    modifyDevice:function(param,value,upval,modifytype){
        suixun.showLoding();//显示加载中
        var svar = this;
        suixun.ajax(serverUrl+'/deviceManage/modifyDevicePhone.json',param,"get",function(data){
            suixun.hideLoding(200);//隐藏加载中
            if(data!=null && data.code == 200){
                suixun.alert("修改成功",function (data) {
                    if(data){
                        $("."+value).show();
                        $("."+upval).hide();
                        if(modifytype == '2' && ((deviceInfoImei != undefined && deviceInfoImei.substring(0,4)=="9999")||(deviceInfoImei != undefined && deviceInfoImei.substring(0,4)=="8888"))){
                            localStorage.mdtid = deviceInfoImei.substring(0,4)+$("#cardid").val();
                            deviceInfoImei = localStorage.mdtid;
                            svar.refresh();
                        }else{
                            svar.refresh();
                        }
                    }
                });
            } else {
                suixun.alert((data!=null && data.msg!=null)?data.msg:"修改失败",function (data) {
                    if(data){
                        $("."+value).show();
                        $("."+upval).hide();
                    }
                });
            }
        });
    },
    refresh: function () {
        suixun.showLoding();//显示加载中
        var param="param={";
        param = getJsonDataNotEmpty(param,"simid",""+simid+"");
        param = getJsonDataNotEmpty(param,"imei",""+deviceInfoImei+"");
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+'/deviceManage/queryDevice.json',param,"get",function(data){
            suixun.hideLoding();//隐藏加载中
            if(data.code == 200){
                if(data.info.length > 0){
                    var obj=data.info[0];
                    deviceInfoImei = obj.mdtid;
                    tableData = {devicetype:obj.devicetype,schoolname:obj.schoolname,factory:obj.factory,mdtid:obj.mdtid,telephone:obj.telephone,starttime:obj.starttime,endtime:obj.endtime,paystatus:obj.paystatus,fee:obj.fee,fee2:obj.fee2,devicetypename:obj.devicetypename,batchid:obj.batchid,boxid:obj.boxid,cardid:obj.cardid};
                    $("#telephone").val(obj.telephone);
                    $("#cardid").val(obj.cardid);
                    $("#endtime").val(obj.endtime);
                    svar.setState({tableData:tableData,otherData:otherData});
                }else{
                    suixun.alert("没有数据");
                    $("#telephone").val("");
                    $("#cardid").val("");
                    $("#endtime").val("");
                    svar.setState({tableData:tableData,otherData:otherData});
                }
            }
        });
    },
    goHistory:function(e){
        localStorage.mdtid = deviceInfoImei;
        window.location.href=serverUrl+'/deviceManage/deviceOperationHistory.html';
    },
    onMouseOutUpdate: function (e) {
        $("."+$(e.target).attr("data-upCls")).hide();
    },
    onMouseOverUpdate: function (e) {
        $("."+$(e.target).attr("data-upCls")).show();
    },
    onClickupdateInfo: function (e) {
        $(e.target).parent().next().show();
        $(e.target).parent().hide();
    },
    onClickSaveCloseInfo: function (e) {
        $("."+$(e.target).attr("data-value")).show();
        $("."+$(e.target).attr("data-upval")).hide();
    },
    /**
     *  中间组件
     * @returns {XML}
     */
    queryParents:function () {
        var param="param={";
        param = getJsonDataNotEmpty(param,"mdtid",deviceInfoImei+'');
        // param = getJsonDataNotEmpty(param,"simid",'"'+simid+'"');
        param += "}";
        var svar = this;
        suixun.ajax(serverUrl+"/parentInfoManage/queryParents.json",param,"get",function(data){
            svar.setState({parents:data.info});
        });
    },
    openPop:function () {
        $(".popPhone").css("display","block");
    },
    //解绑设备
    onClickTyingDevice: function (e) {
        var paystatus  = $(e.target).attr("data-paystatus");//获取状态
        // if(paystatus != "3"){//去掉已缴费的验证
            suixun.confirm_noTit("是否解绑?",function (data) {
                if(data){
                    suixun.showLoding();//显示加载中
                    var param="param={";
                    param = getJsonDataNotEmpty(param,"imei",imei);
                    param = getJsonDataNotEmpty(param,"objectid",studentId);
                    param = getJsonDataNotEmpty(param,"peopleid",msgParentid);
                    param += "}";
                    suixun.ajax(serverUrl+'/deviceManage/unbindDevice.json',param,"get",function(data){
                        suixun.hideLoding(200);//隐藏加载中
                        if(data.code == 200 && data.info != null){
                            suixun.alert(data.info,function (data) {
                                if(data){
                                    window.location.href="./queryDeviceList.html";
                                }
                            });
                        }else(
                            suixun.alert(data.msg)
                        )
                    });
                }
            })
        // }
    },
    /**
     * 底部组件事件
     */
    queryStudent:function () {
        suixun.showLoding();//显示加载中
        var param="param={";
        param = getJsonDataNotEmpty(param,"mdtid",deviceInfoImei);
        // param = getJsonDataNotEmpty(param,"simid",""+simid+"");
        param += "}";
        var svar= this;
        suixun.ajax(serverUrl+"/studentInfoManage/queryStduent.json",param,"get",function(data){
            if(data.code == 200 && data.info != null){
                studentId = data.info.objectid;
                svar.setState({student:data.info});
            }
        });
    },
    /**
     * 同步数据——家校通
     * @returns {XML}
     */
    synchronousData: function () {
        var param="param={";
        param = getJsonDataNotEmpty(param,"imei",deviceInfoImei);
        param += "}";
        suixun.confirm_noTit("是否同步数据?",function (data) {
            if(data){
                suixun.showLoding();//显示加载中
                suixun.ajax(serverUrl+"/deviceManage/synJxtBaby.json",param,"get",function(data){
                    suixun.hideLoding();//隐藏加载中
                    if(data.code == 200){
                        suixun.alert('操作成功!');
                    }else{
                        suixun.alert(data.msg);
                    }
                });
            }
        });

    },
    onClickHidePop: function () {
        $(".changeDevice").hide();
        $(".errorMsg").hide();
        $("#deviceCode").val("");
        $("#deviceType").val("2.4")
    },
    showChangeDevicePop: function () {
        $(".changeDevice").show();
    },
    /**
     * 更换考勤卡
     */
    changeDevice: function () {
        var deviceType = $("#deviceType").val();
        var deviceCode = $("#deviceCode").val();
        if(deviceCode==''){
            suixun.alert('考勤卡号不能为空！');
            return;
        }else if(deviceCode.length != 10 || !/^[1-9]\d*$/.test(deviceCode)){
            suixun.alert('考勤卡号格式不对！');
            return;
        }
        this.cahngeDeviceData(this.state.tableData.cardid,this.state.cardType,deviceCode,deviceType,true);
        // if(this.state.tableData.devicetype==2){
        //     suixun.showLoding();//显示加载中
        //
        //
        //
        //     suixun.ajax(serverUrl+'/deviceInitManage/queryDeviceInitList.json','param={pagenumber:1,pagecount:15,"type":"3","batchid":"","status":"","imei":"'+this.state.tableData.cardid+'"}',"get",function(data){
        //         suixun.hideLoding();//隐藏加载中
        //         if(data.code==200 && data.info.queryresult.length>0){
        //             this.cahngeDeviceData(this.state.tableData.cardid,data.info.queryresult[0].factory,deviceCode,deviceType,true);
        //         }else{
        //             suixun.ajax(serverUrl+'/deviceInitManage/queryDeviceInitList.json','param={pagenumber:1,pagecount:15,"type":"4","batchid":"","status":"","imei":"'+this.state.tableData.cardid+'"}',"get",function(data){
        //                 suixun.hideLoding();//隐藏加载中
        //                 if(data.code==200 && data.info.queryresult.length>0){
        //                     this.cahngeDeviceData(this.state.tableData.cardid,data.info.queryresult[0].factory,deviceCode,deviceType,true);
        //                 }else{
        //                     suixun.alert('没有查询到考勤卡号：'+this.state.tableData.cardid+'的类型');
        //                 }
        //             }.bind(this))
        //         }
        //     }.bind(this))
        // }else{
        //     this.cahngeDeviceData(this.state.tableData.cardid,this.state.tableData.devicetype==8?'13.56':'2.4',deviceCode,deviceType,true);
        // }
    },
    /**
     * 请求
     */
    cahngeDeviceData: function (oldCardid,oldType,newCardid,newType,type) {
        var data = new FormData();
        data.append("oldCardid",oldCardid);
        data.append("oldType",oldType);
        data.append("newCardid",newCardid);
        data.append("newType",newType);
        suixun.showLoding();//显示加载中
        suixun.ajax(serverUrl+'/deviceManage/singleChangeDevice.json',data,"post",function(data){
            suixun.hideLoding(200);//隐藏加载中
            if(data!=null && data.code == 200){
                suixun.alert("修改成功",function (data) {
                    if(data){
                        this.onClickHidePop();
                        var imei = newCardid;
                        if(type && newType=='13.56'){
                            imei = '8888'+newCardid;
                        }else if(type && newType=='2.4'){
                            imei = '9999'+newCardid;
                        }
                        imei = this.state.tableData.devicetype==2?this.state.tableData.mdtid:imei;
                        localStorage.mdtid= imei;
                        localStorage.deviceType = "mdtid";
                        window.location.reload();
                    }
                }.bind(this));
            } else {
                suixun.alert((data!=null && data.msg!=null)?data.msg:"新增失败");
            }
        }.bind(this));
    },
    render:function () {
        {
            var mdtidShow = tableData.mdtid,isKQK = false;//获取设备IMEI号
            if(mdtidShow != undefined && mdtidShow.substring(0,4)=="9999"){
                isKQK = true;
            }else if(mdtidShow != undefined && mdtidShow.substring(0,4)=="8888"){
                isKQK = true;
            }
            var parentsData='';
            if(this.state.parents.length != 0 && this.state.parents != null ){
                parentsData = this.state.parents.map(function (parent,index) {
                    return(
                        <ParentsComponent key={index} parent={parent}/>
                    );
                }.bind(this));
            }
            var parent = this.state.parent;
            if(undefined != parent){
                if(parent.peopleid == parent.parentid){
                    msgParentid = parent.parentid;
                }
            }
        }
        return(
            <div id="maincomponent" className="tableManage-body">
                <div  className="pop popPhone changeDevice popModel">
                    <div className="model"></div>
                    <div className="pop-info popModel-info popPhone-info">
                        <div className="pop-title popModel-title popPhone-title">
                            <span className="pop-title-content popModel-title-content">
                                <span className="pop-title-content-solid-left popModel-title-content-solid-left" style={{top:'10px',left:'90px'}}/>
                                新增SIM卡
                                <input type="hidden" />
                                <span className="pop-title-content-solid-right popModel-title-content-solid-right" style={{top:'10px',right:'90px'}}/>
                            </span>
                            <span className="pop-title-img popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                        </div>
                        <div className="pop-body popModel-body">
                            <div className="popModel-body-input">
                                <span className="popModel-body-input-title">设备类型</span>
                                <span className="popModel-body-input-content">
                                    <select className="export-factory msgType" id="deviceType">
                                        <option value="2.4" selected='selected'>2.4</option>
                                        <option value="13.56" >13.56</option>
                                    </select>
                                </span>
                            </div>
                            <div className="pop-body-input" style={{display:'inline-block',height:'3rem'}}>
                                <span className="pop-body-input-title">主题摘要</span>
                                <span className="popAddMessage-body-input-content">
                                    <input className="input-content message-title" style={{padding: "5px 10px 5px 8px"}} id="deviceCode"  type="text" placeholder="请输入新的考勤卡号"  maxLength="10" />
                                </span>
                                <span className="verify msgTitle-error" />
                            </div>
                        </div>
                        <div className="popModel-button" style={{bottom:'10px',display:'inline-block'}}   >
                            <span  className="popModel-button-ok" onClick={this.changeDevice.bind(this)}>确定</span>
                        </div>
                    </div>
                </div>

                <div id="headcomponent" className="pageTop clearfix">
                    <div className="comm-headcomponent">
                        <div className="comm-head-headcomponent">
                            <div className="head-left-head-component">
                                <div className="head-left-head-left-component">设备详情</div>
                                <div className="head-left-head-right-component">
                                    <img src="../img/icon/annotations.png" alt=""/>
                                    <div className="left-annotations-left"></div>
                                    <div className="left-annotations">
                                        <span>这是注释。</span>
                                    </div>
                                </div>
                            </div>
                            <div className="head-right-component">
                                <div className="head-right-right-component">
                                    <div className="head-right-right-component-data" onClick={this.goHistory} data-value={tableData.mdtid}>
                                        <span className="right-head-right-component-line"/>
                                        <div className="history-img">
                                            <img src="../img/icon/jilu.png" alt=""/>
                                        </div>
                                        <div className="history-text" >
                                            <span>更改记录</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="head-right-left-component">
                                    <div className="back-data" onClick={this.goback}>
                                        <div className="back-data-comm">
                                            <img src="../img/icon/fanhui.png" alt=""/>
                                        </div>
                                        <div className="back-data-comm">
                                            <span >返回</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="head-right-left-component">
                                    <div className="synchronousData" onClick={this.synchronousData.bind(this)}>同步数据</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="comm-bodycomponent clearfix">
                        <ul className="comm-bodycomponent-text-ul clearfix">
                            <li className="comm-bodycomponent-text-li clearfix">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>设备IMEI号 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                <span>
                                    {mdtidShow==null?"无":mdtidShow==''?"无":tableData.mdtid}
                                </span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>激活日期 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.starttime==null?"无":tableData.starttime}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>批号 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.batchid==null?"无":tableData.batchid}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>设备类型 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.devicetypename==null?"无":tableData.devicetypename}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>设备有效期 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm preValTime" onMouseOver={this.onMouseOverUpdate} data-upCls="upTim" onMouseOut={this.onMouseOutUpdate}>
                                    <span onMouseOver={this.onMouseOverUpdate} data-upCls="upTim" onMouseOut={this.onMouseOutUpdate} >{tableData.endtime==null?"无":tableData.endtime}</span>
                                    <span onMouseOver={this.onMouseOverUpdate} data-upCls="upTim" onMouseOut={this.onMouseOutUpdate}  onClick={this.onClickupdateInfo}  className="updateInfo upTim">修改</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm saveInfo upValTime">
                                    <div className="comm-bodycomponent-text-right-input ">
                                        <div className="comm-bodycomponent-text-right-input-left timeInput">
                                            <input type="text" name="endtime" className="frequencyTime" id="endtime" placeholder="选择日期"  />
                                        </div>
                                        <div className="comm-bodycomponent-text-right-input-button">
                                            <span onClick={this.modifyEndTime} data-upval="upValTime" data-value="preValTime">保存</span>
                                        </div>
                                        <div className="comm-bodycomponent-text-right-input-button saveInfoClose">
                                            <span onClick={this.onClickSaveCloseInfo} data-upval="upValTime" data-value="preValTime">取消</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>箱号 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.boxid==null?"无":tableData.boxid}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>设备手机号 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm preValPho" onMouseOver={this.onMouseOverUpdate} data-upCls="upPho" onMouseOut={this.onMouseOutUpdate}>
                                    <span onMouseOver={this.onMouseOverUpdate} data-upCls="upPho" onMouseOut={this.onMouseOutUpdate} >{tableData.telephone==null?"无":tableData.telephone}</span>
                                    {
                                        isKQK==true?"":<span onMouseOver={this.onMouseOverUpdate} data-upCls="upPho" onMouseOut={this.onMouseOutUpdate} onClick={this.onClickupdateInfo}   className="updateInfo upPho">修改</span>
                                    }
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm saveInfo upValPho">
                                    <div className="comm-bodycomponent-text-right-input">
                                        <div className="comm-bodycomponent-text-right-input-left">
                                            <input type="text" name="telephone" id="telephone" placeholder="设备手机号" maxLength="11" />
                                        </div>
                                        <div className="comm-bodycomponent-text-right-input-button">
                                            <span onClick={this.modifyPhone} data-upval="saveInfo" data-value="preValPho">保存</span>
                                        </div>
                                        <div className="comm-bodycomponent-text-right-input-button saveInfoClose">
                                            <span onClick={this.onClickSaveCloseInfo} data-upval="upValPho" data-value="preValPho">取消</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>缴费状态 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.paystatus=="1"?"未激活":(tableData.paystatus=="2"?"已激活":(tableData.paystatus=="3"?"已缴费":(tableData.paystatus=="4"?"已过期":(tableData.paystatus=="5"?"已回收":"无"))))}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>考勤卡号 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm preValCId" onMouseOver={this.onMouseOverUpdate} data-upCls="upCId" onMouseOut={this.onMouseOutUpdate}>
                                    <span onMouseOver={this.onMouseOverUpdate} data-upCls="upCId" onMouseOut={this.onMouseOutUpdate} >{tableData.cardid==null?"无":tableData.cardid}</span>
                                    <span onMouseOver={this.onMouseOverUpdate} data-upCls="upCId" onMouseOut={this.onMouseOutUpdate} onClick={this.onClickupdateInfo}  className="updateInfo upCId">修改</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm saveInfo upValCId">
                                    <span style={{display:'none'}}>智能学生证</span>
                                    <div className="comm-bodycomponent-text-right-input">
                                        <div className="comm-bodycomponent-text-right-input-left">
                                            <input type="text"  name="cardid" id="cardid" placeholder="考勤卡号" maxLength="10"/>
                                        </div>
                                        <div className="comm-bodycomponent-text-right-input-button">
                                            <span onClick={this.modifyCardId} data-upval="upValCId"  data-value="preValCId">保存</span>
                                        </div>
                                        <div className="comm-bodycomponent-text-right-input-button saveInfoClose">
                                            <span onClick={this.onClickSaveCloseInfo} data-upval="upValCId"  data-value="preValCId">取消</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>设备推广价 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.fee==null?"无":tableData.fee}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>学校 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.schoolname==null?"无":tableData.schoolname}</span>
                                </div>
                            </li>
                            <li className="comm-bodycomponent-text-li">
                                <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                    <span>设备套餐 :</span>
                                </div>
                                <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                    <span>{tableData.fee2==null?"无":tableData.fee2}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="bodycomponent" className="pageBottom">
                    <div className="comm-headcomponent">
                        <div className="comm-head-headcomponent">
                            <div className="head-left-head-component">
                                <div className="head-left-head-left-component user-details">监护成员详情</div>
                                <div className="head-left-head-right-component">
                                    <img src="../img/icon/annotations.png" alt=""/>
                                    <div className="left-annotations-left"></div>
                                    <div className="left-annotations">
                                        <span>这是注释。</span>
                                    </div>
                                </div>
                            </div>
                            <div className="head-right-component">
                                <div className="head-right-left-component user-details-button" >
                                    <div className="back-data "  onClick={this.openPop}>
                                        <div className="back-data-comm">
                                            <img  src="../img/icon/faxiaoxi.png" alt=""/>
                                        </div>
                                        <div className="back-data-comm" style={{width:"62px"}}>
                                            <span >发消息</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="comm-bodycomponent clearfix">
                        <form name="parentForm" action="javascript:;">
                            {this.state.parents == ""?"":parentsData}
                            {this.state.parents==""?<div className="tableNoDatMsg">{tableNoDataCount}</div>:''}
                        </form>
                    </div>
                    <div className="comm-bodycomponent-list">
                        <div className="bodycommponent-list-div">
                            {
                                this.state.parents == ""?<span className="comm-bodycomponent-list-button" style={{backgroundColor:"#cccccc",cursor: "default"}} >解绑设备</span>:<span className="comm-bodycomponent-list-button" data-paystatus={tableData.paystatus} style={{backgroundColor:"#f44c4c"}} onClick={this.onClickTyingDevice}>解绑设备</span>
                                // this.state.parents == ""?<span className="comm-bodycomponent-list-button" style={{backgroundColor:"#cccccc",cursor: "default"}} >解绑设备</span>:<span className="comm-bodycomponent-list-button" data-paystatus={tableData.paystatus} style={{backgroundColor:tableData.paystatus=="3"?"#cccccc":"#f44c4c"}} onClick={this.onClickTyingDevice}>解绑设备</span>
                            }
                            {
                                this.state.cardType==''?
                                    <span className="comm-bodycomponent-list-button" style={{backgroundColor:"#cccccc",margin:'-50px 0 0 175px',cursor: 'no-drop'}} >更换考勤卡</span>
                                    :
                                    <span className="comm-bodycomponent-list-button" style={tableData.mdtid!=null?{backgroundColor:"#f44c4c",margin:'-50px 0 0 175px'}:{backgroundColor:"#cccccc",margin:'-50px 0 0 175px'}} onClick={this.showChangeDevicePop.bind(this)} >更换考勤卡</span>
                            }

                        </div>
                    </div>
                    <div id="footcomponent" style={{marginBottom: "25px"}}>
                        <div className="comm-headcomponent" style={{height: "58px"}}>
                            <div className="comm-head-headcomponent clearfix" style={{marginTop: "60px"}}>
                                <div className="head-left-head-component">
                                    <div className="head-left-head-left-component" >用户详情</div>
                                    <div className="head-left-head-right-component">
                                        <img src="../img/icon/annotations.png" alt=""/>
                                        <div className="left-annotations-left"></div>
                                        <div className="left-annotations">
                                            <span>这是注释。</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="comm-bodycomponent clearfix">
                            <div className="children-icon">
                                <img src="../img/icon/studentImg.png" alt=""/>
                            </div>
                            <ul className="comm-bodycomponent-text-ul" style={{width:'30%'}}>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>昵称 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.objectname==undefined?"无":this.state.student.objectname}</span>
                                    </div>
                                </li>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>学校 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.schoolname==undefined?"无":this.state.student.schoolname}</span>
                                    </div>
                                </li>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>生日 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.birthday==undefined?"无":this.state.student.birthday}</span>
                                    </div>
                                </li>
                            </ul>
                            <ul className="comm-bodycomponent-text-ul" style={{width:'30%'}}>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>姓名 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.studentname==undefined?"无":this.state.student.studentname}</span>
                                    </div>
                                </li>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>班级 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.grade==undefined?"无":this.state.student.grade}</span>
                                    </div>
                                </li>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>身高 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.height==undefined?"无":this.state.student.height}</span>
                                    </div>
                                </li>
                            </ul>
                            <ul className="comm-bodycomponent-text-ul" style={{width:'30%'}}>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>性别 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.sex==undefined?"无":this.state.student.sex}</span>
                                    </div>
                                </li>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>学籍号 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.studentid==undefined?"无":this.state.student.studentid}</span>
                                    </div>
                                </li>
                                <li className="comm-bodycomponent-text-li">
                                    <div className="comm-bodycomponent-text-left comm-bodycomponent-text-comm">
                                        <span>体重 :</span>
                                    </div>
                                    <div className="comm-bodycomponent-text-right comm-bodycomponent-text-comm">
                                        <span>{this.state.student.weight==undefined?"无":this.state.student.weight}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <Pop parents={this.state.parents}/>
                </div>
                <footer id="copyright">
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        );
    }

});
var ParentsComponent = React.createClass({
    componentDidMount:function () {
        $(".modifyTel").click(function () {
            $(this).parent().next().find("input").val($(this).prev().html());
            $(this).parent().next().css('display','inline');
            $(this).parent().css('display','none');
        });
        $(".modifyTelClose").click(function () {
            var val = $(this).attr("data-value");
            $(".update"+val+"").css('display','inline');
            $(".save"+val+"").css('display','none');
        });
    },
    onClickModifyTel:function () {
        var phone = $(this.refs.peopleTelephone).val(),svar = this;//获取手机号
        if(phone == ""){
            suixun.alert("手机号码不能为空!");
            return;
        }else if(phone.length != 11){
            suixun.alert("手机号码格式错误!");
            return;
        }else if(!/^[^\u4e00-\u9fa5]{0,}$/.test(phone)){
            suixun.alert("手机号码格式错误!");
            return;
        }
        suixun.showLoding();//显示加载中
        //param = getJsonDataNotEmpty(param,"mdtid",deviceInfoImei);
        var param="param={";
        param = getJsonDataNotEmpty(param,"parentphone",'"'+phone+'"');
        param = getJsonDataNotEmpty(param,"parentid",$(svar.refs.peopleTelephone).parent().parent().prev().find("input").val());
        param += "}";
        suixun.ajax(serverUrl+"/parentInfoManage/phoneService.json",param,"get",function(data){
            suixun.hideLoding(200);//隐藏加载中
            if(data != null && data.info != null && data.code == 200){
                suixun.alert("修改成功",function (data) {
                    if(data){
                        $(svar.refs.peopleTelephone).parent().parent().css('display','none');
                        $(svar.refs.peopleTelephone).parent().parent().prev().find('span').eq(0).html($(svar.refs.peopleTelephone).val());
                        $(svar.refs.peopleTelephone).parent().parent().prev().css('display','inline');
                    }
                });
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    onClickResetPassword:function () {
        var vars = this;
        suixun.confirm_noTit('是否重置密码?',function (data) {
            if(data == true) {
                suixun.showLoding();//显示加载中
                var parentphone = $(vars.refs.peopleTel).html(),
                    parentid = $(vars.refs.peopleTel).prev().val();
                var param = "param={";
                param = getJsonDataNotEmpty(param, "mdtid", '"'+deviceInfoImei+'"');
                param = getJsonDataNotEmpty(param, "parentphone", '"'+parentphone+'"');
                param = getJsonDataNotEmpty(param, "parentid", '"'+parentid+'"');
                param += "}";
                suixun.ajax(serverUrl + "/parentInfoManage/passwordService.json",param,"get",function(data){
                    suixun.hideLoding(200);//隐藏加载中
                    if (data != null && data.info != null && data.code == 200) {
                        suixun.alert("修改成功,修改后密码为：" + data.info.resultpassword);
                    } else {
                        suixun.alert(data.msg);
                    }
                });
            }
        });
    },
    /**
     * 监护成员详情
     */
    onClickModifyTelClose: function (e) {
        $(".update"+ $(e.target).attr("data-familystatus")).css('display','inline-block');
        $(".save"+ $(e.target).attr("data-familystatus")).css('display','none');
    },
    render:function () {
        var parent=this.props.parent;
        if(parent.peopleid == parent.parentid){
            msgParentid = parent.parentid;
        }
        return(
            <div className="comm-bodycomponent-list clearfix">
                <div style={{width:'100%',float: "left"}}>
                    <div className="head-img">
                        <img src="../img/icon/parentHeadImg.png" alt=""/>
                    </div>
                    <ul className="comm-bodycomponent-list-ul clearfix">
                        <li>
                            <span>{parent.familystatus}{parent.peopleid==parent.parentid?'(管理员)':null} :</span>
                            <div className={"comm-bodycomponent-li-right update"+parent.familystatus}>
                                <input type="hidden" value={parent.peopleid} />
                                <span style={{left:'5px'}} ref="peopleTel">{parent.peopletel==null?"无":parent.peopletel}</span>
                                <span style={{left:'10px'}} className="comm-bodycomponent-list-text-right-color modifyTel">修改</span>
                                <span style={{left:'15px'}} className="comm-bodycomponent-list-text-right-color" onClick={this.onClickResetPassword}>重置密码</span>
                            </div>
                            <div className={"comm-bodycomponent-modify-tel save"+parent.familystatus}>
                                <div className="comm-bodycomponent-text-right-input-left input-left">
                                    <input type="number" name="people-telephone" ref="peopleTelephone" maxLength="11" />
                                </div>
                                <div className="comm-bodycomponent-text-right-input-button input-right">
                                    <span onClick={this.onClickModifyTel}>保存</span>
                                </div>
                                <div className="comm-bodycomponent-text-right-input-button input-right" onClick={this.onClickModifyTelClose}>
                                    <span className="modifyTelClose" data-familystatus={parent.familystatus}>取消</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <span>姓名 :</span>
                            <span style={{left:'2%'}}>{parent.peoplename==null?"无":parent.peoplename}</span>
                        </li>
                        <li>
                            <span>身份证号 :</span>
                            <span style={{left:'2%'}}>{parent.peopleidcard==null?"无":parent.peopleidcard}</span>
                        </li>
                        {
                            /**
                             <li>
                             <span>手机型号 :</span>
                             <span style={{left:'2%'}}>华为</span>
                             <span style={{left:'5%'}}>Android 4.2</span>
                             </li>
                             */
                        }
                        <li>
                            <span>地址 :</span>
                            <span style={{left:'2%'}}>{parent.homeaddr==null?"无":parent.homeaddr}</span>
                        </li>
                    </ul>
                </div>
            </div>
        );
    }
});
//模态框组件
var Pop = React.createClass({
    onClickHidePop:function () {
        $(".popPhone").css("display","none");
        $(".msgContent").val("");
        $(".message-title").val("");
    },
    componentDidMount:function () {
        $('.comm-content-send-style').click(function () {
            if($(this).next().css("display")=='none'){
                $(this).next().css("display","block");
            }else{
                $(this).next().css("display","none");
            }
        });
        $('.send-style-text').click(function () {
            $(this).parent().prev('span').html($(this).html());
            $(this).parent().css("display","none");
        });
        //多选
        $("#parentCheckBox").click(function(){
            if($("#parentCheckBox").is(":checked")){
                $(".childrenCheckBox").prop("checked",true);
            }else{
                $(".childrenCheckBox").attr("checked",null);
            }
        });
        $(".frequencyTime").datetimepicker({
            language:  'zh-CN',
            format: 'yyyy-mm-dd hh:ii:ss',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-right"
        });
    },
    //发送消息
    onClickAddSendMessage:function () {
        //发送类型
        var msgType = $(".msgType option:selected").val();
        //发送频率
        var sendrate = $(".sendFrequency option:selected").val();

        //验证时间
        var sendMsgTime = $("#sendMsgTime").val();
        if(sendMsgTime.length == 0){
            suixun.alert("推送时间不能为空!");
            return;
        }
        //验证接收对象
        var peopletels = "";
        var childsCheckBox = $(".comm-body-receive-body > ul").children();
        var b = true;
        for(var i = 0;i<childsCheckBox.length;i++){
            var child = $(childsCheckBox[i]).children();
            if($(child[0]).is(':checked')){
                peopletels += $(child[1]).attr("data-phone")+",";
                b = false;
            }
        }
        if(b){
            suixun.alert("至少选择一个接收对象!");
            return;
        }else {
            if(msgType == "1"){
                peopletels += $(child[1]).attr("data-phone")+",";
            }
        }
        peopletels = peopletels.substring(0,peopletels.length-1);
        //验证主题摘要 .replace(/\'/g,"\\'").replace(/\"/g,'\\"');//替换单引号和双引号
        var msgTitle = $(".message-title").val();
        if(msgTitle.length == 0){
            suixun.alert("主题摘要不能为空!");
            return;
        }else if(msgTitle.length > 40){
            suixun.alert("主题摘要内容过长!");
            return;
        }
        //验证消息内容
        var msgContent = $(".msgContent").val();
        if(msgContent.length == 0){
            suixun.alert("消息内容不能为空!");
            return;
        }else if(msgContent.length > 500){
            suixun.alert("消息内容内容超出长度限制!");
            return;
        }
        var param="{";
        param = getJsonDataNotEmpty(param,"sendtype",'"'+msgType+'"');
        param = getJsonDataNotEmpty(param,"receivetype",'2');
        param = getJsonDataNotEmpty(param,"peopletels",'"'+peopletels+'"');
        param = getJsonDataNotEmpty(param,"sendrate",'"'+sendrate+'"');
        param = getJsonDataNotEmpty(param,"title",'"'+msgTitle.replace(/\'/g,"\\'").replace(/\"/g,'\\"')+'"');
        param = getJsonDataNotEmpty(param,"content",'"'+msgContent.replace(/\'/g,"\\'").replace(/\"/g,'\\"')+'"');
        param = getJsonDataNotEmpty(param,"starttime",'"'+sendMsgTime+'"');
        param += "}";
        var svar = this;
        suixun.ajax_sendMsg(serverUrl+"/sendMessageManage/addSendMessage.json",param,function(data){
            if(data.code==200 && data.info.resultstatus == 1){
                suixun.alert("操作成功!",function (data) {
                    if(data == true){
                        svar.onClickHidePop();
                    }
                });
            }else{
                suixun.alert(data.msg);
            }
        });
    },
    render:function () {
        var parents=this.props.parents.map(function (parent,index) {
            return(
                <li key={index}style={{display:parent.ispush==1?'inline-block':'none'}}>
                    <input type="checkbox" className="childrenCheckBox" data-phone={parent.peopletel} />
                    <span data-name={parent.familystatus}  data-phone={parent.peopletel}>{parent.familystatus+parent.peopletel}</span>
                </li>
            );
        }.bind(this));
        return(
            <form name="schoolForm">
                <div  className="pop popPhone schoolPop popModel">
                    <div className="model"></div>
                    <div className="pop-info popModel-info popPhone-info">
                        <div className="pop-title popModel-title popPhone-title">
                            <span className="pop-title-content popModel-title-content">
                                <span className="pop-title-content-solid-left popModel-title-content-solid-left" style={{top:'10px',left:'90px'}}/>
                                新增消息
                                <input type="hidden" />
                                <span className="pop-title-content-solid-right popModel-title-content-solid-right" style={{top:'10px',right:'90px'}}/>
                            </span>
                            <span className="pop-title-img popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                        </div>
                        <div className="pop-body popModel-body">
                            <div className="popModel-body-input">
                                <span className="popModel-body-input-title">消息类型</span>
                                <span className="popModel-body-input-content">
                                    <select className="export-factory msgType">
                                        <option value="2" >推送</option>
                                        <option style={{display:"none"}} value="1" >短信</option>
                                    </select>
                                </span>
                            </div>
                            <div className="popModel-body-input">
                                <span className="popModel-body-input-title ">发送频率</span>
                                <span className="popModel-body-input-content">
                                    <select className="export-factory sendFrequency">
                                        <option value="1" >只发送一次</option>
                                        <option value="2" >连续三天</option>
                                        <option value="3" >连续一周</option>
                                    </select>
                                </span>
                            </div>
                            <div className="pop-body-input">
                                <span className="pop-body-input-title" >推送日期</span>
                                <span className="pop-body-input-right-content input-time-span">
                                    <input size="16" style={{marginTop: "0px"}} className="frequencyTime" id="sendMsgTime" type="text"  placeholder="请选择推送日期" readonly />
                                </span>
                                <span className="frequencyTime_prompt">推送时间范围8:00~23:00</span>
                                <span className="verify frequency-time-error" />
                            </div>
                            <div className="pop-body-input" style={{height:'auto'}}>
                                <span className="pop-body-input-title" >接收对象</span>
                                <div className="comm-body-receive-body">
                                    <span className="checkbox-all">
                                        <input type="checkbox" id="parentCheckBox"/>
                                        <span>全部</span>
                                    </span>
                                    <ul>
                                        {parents}
                                    </ul>
                                </div>
                                <span className="verify imei-error" />
                            </div>
                            <div className="pop-body-input" style={{display:'inline-block',height:'3rem'}}>
                                <span className="pop-body-input-title">主题摘要</span>
                                <span className="popAddMessage-body-input-content">
                                    <input className="input-content message-title" style={{width: "342px",padding: "5px 0 5px 8px"}} type="text" placeholder="请输入主题摘要（用于检索 限20个汉字）"  maxLength="20" />
                                </span>
                                <span className="verify msgTitle-error" />
                            </div>
                            <div className="pop-body-input" style={{display:'inline-block',height:'80px'}}>
                                <span className="pop-body-input-title">消息内容</span>
                                <div className="comm-body-message-text">
                                    <textarea className="msgContent" id="" cols="30" rows="10" maxLength="500"  placeholder="请输入推送消息内容（限500个字符）"/>
                                </div>
                                <span className="verify imei-error" />
                            </div>
                        </div>
                        <div className="popModel-button" style={{bottom:'10px',display:'inline-block'}}   >
                            <span onClick={this.onClickAddSendMessage} className="popModel-button-ok">发送</span>
                        </div>
                    </div>
                </div>
            </form>

        );
    }
});
ReactDOM.render(<MainComponent />,document.getElementById('tableManage'));
$('.frequencyTime').datetimepicker({
    format: "Y-m-d H:i:s", //格式化日期
    timepicker: true, //显示时间选项
    todayButton: false, //关闭选择今天按钮
    step:1,//时间间隔
});
//是否全选
$(".comm-body-receive-body").on('click','.childrenCheckBox',function () {
    var childsCheckBox = $(".comm-body-receive-body > ul").children();
    var b = 0;
    for(var i = 0;i<childsCheckBox.length;i++){
        var child = $(childsCheckBox[i]).children();
        if($(child[0]).is(':checked')){
            b ++;
        }
    };
    if(b == childsCheckBox.length){
        $("#parentCheckBox").prop('checked',true);
    }else{
        $('#parentCheckBox').prop('checked',false);
    }
})/**
 * Created by xxx on 2017/3/27.
 */
